<rd-header>
  <rd-header-title title-text="Environment details">
    <a data-toggle="tooltip" title="Refresh" ui-sref="portainer.endpoints.endpoint({id: endpoint.Id})" ui-sref-opts="{reload: true}">
      <i class="fa fa-sync" aria-hidden="true"></i>
    </a>
  </rd-header-title>
  <rd-header-content>
    <a ui-sref="portainer.endpoints">Environments</a> &gt; <a ui-sref="portainer.endpoints.endpoint({id: endpoint.Id})">{{ endpoint.Name }}</a>
  </rd-header-content>
</rd-header>

<div class="row">
  <information-panel ng-if="state.edgeEndpoint && endpoint.EdgeID && endpoint.LastCheckInDate" title-text="Edge information">
    <span class="small text-muted">
      <p>
        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
        This Edge environment is associated to an Edge environment {{ state.kubernetesEndpoint ? '(Kubernetes)' : '(Docker)' }}.
      </p>
      <p>
        Edge key: <code>{{ endpoint.EdgeKey }}</code>
      </p>
      <p>
        Edge identifier: <code>{{ endpoint.EdgeID }}</code>
      </p>
      <p>
        <button
          type="button"
          class="btn btn-primary btn-sm"
          ng-disabled="state.actionInProgress"
          ng-click="onDeassociateEndpoint()"
          button-spinner="state.actionInProgress"
          analytics-on
          analytics-event="edge-endpoint-deassociate"
          analytics-category="edge"
        >
          <span ng-hide="state.actionInProgress">De-associate</span>
        </button>
      </p>
    </span>
  </information-panel>
  <information-panel ng-if="state.edgeEndpoint && !endpoint.LastCheckInDate" title-text="Deploy an agent">
    <span class="small text-muted">
      <p>
        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
        Refer to the platform related command below to deploy the Edge agent in your remote cluster.
      </p>
      <p>
        The agent will communicate with Portainer via <u>{{ edgeKeyDetails.instanceURL }}</u> and <u>tcp://{{ edgeKeyDetails.tunnelServerAddr }}</u>
      </p>
      <div class="input-group input-group-sm" style="margin-top: 10px; margin-bottom: 10px">
        <div class="btn-group btn-group-sm">
          <label class="btn btn-primary" ng-model="state.platformType" uib-btn-radio="'linux'"><i class="fab fa-linux" style="margin-right: 2px"></i> Linux</label>
          <label class="btn btn-primary" ng-model="state.platformType" uib-btn-radio="'windows'"><i class="fab fa-windows" style="margin-right: 2px"></i> Windows</label>
        </div>
      </div>

      <por-switch-field
        label="'Allow self-signed certs'"
        checked="state.allowSelfSignedCerts"
        tooltip="'When allowing self-signed certificates the edge agent will ignore the domain validation when connecting to Portainer via HTTPS'"
        on-change="(onToggleAllowSelfSignedCerts)"
      ></por-switch-field>

      <div style="margin-top: 10px">
        <uib-tabset active="state.deploymentTab">
          <uib-tab index="'kubernetes'" heading="Kubernetes" ng-if="state.platformType === 'linux'">
            <code style="display: block; white-space: pre-wrap; padding: 16px 45px">
              {{ dockerCommands[state.deploymentTab][state.platformType](agentVersion, agentShortVersion, endpoint.EdgeID, endpoint.EdgeKey, state.allowSelfSignedCerts) }}
            </code>
          </uib-tab>
          <uib-tab index="'swarm'" heading="Docker Swarm">
            <code style="display: block; white-space: pre-wrap; padding: 16px 45px">
              {{ dockerCommands[state.deploymentTab][state.platformType](agentVersion, agentShortVersion, endpoint.EdgeID, endpoint.EdgeKey, state.allowSelfSignedCerts) }}
            </code>
          </uib-tab>
          <uib-tab index="'standalone'" heading="Docker Standalone">
            <code style="display: block; white-space: pre-wrap; padding: 16px 45px">
              {{ dockerCommands[state.deploymentTab][state.platformType](agentVersion, agentShortVersion, endpoint.EdgeID, endpoint.EdgeKey, state.allowSelfSignedCerts) }}
            </code>
          </uib-tab>
        </uib-tabset>
        <div style="margin-top: 10px">
          <span class="btn btn-primary btn-sm" ng-click="copyEdgeAgentDeploymentCommand()"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy command</span>
          <span id="copyNotificationDeploymentCommand" style="margin-left: 7px; display: none; color: #23ae89"> <i class="fa fa-check" aria-hidden="true"></i> copied </span>
        </div>
      </div>
      <div class="col-sm-12 form-section-title" style="margin-top: 25px"> Join token </div>
      <p>
        <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
        For those prestaging the edge agent, use the following join token to associate the Edge agent with this environment.
      </p>
      <p> You can read more about pre-staging in the userguide available <a href="https://downloads.portainer.io/edge_agent_guide.pdf">here.</a> </p>
      <div style="margin-top: 10px; overflow-wrap: break-word">
        <code>
          {{ endpoint.EdgeKey }}
        </code>
        <div style="margin-top: 10px">
          <span class="btn btn-primary btn-sm" ng-click="copyEdgeAgentKey()"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy token</span>
          <span id="copyNotificationEdgeKey" style="margin-left: 7px; display: none; color: #23ae89"> <i class="fa fa-check" aria-hidden="true"></i> copied </span>
        </div>
      </div>
    </span>
  </information-panel>
  <information-panel ng-if="state.kubernetesEndpoint && (!state.edgeEndpoint || (state.edgeEndpoint && endpoint.EdgeID))" title-text="Kubernetes features configuration">
    <span class="small text-muted">
      <i class="fa fa-tools blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
      You should configure the features available in this Kubernetes environment in the
      <a ui-sref="portainer.k8sendpoint.kubernetesConfig({id: endpoint.Id})">Kubernetes configuration</a> view.
    </span>
  </information-panel>
</div>

<div class="row">
  <div class="col-lg-12 col-md-12 col-xs-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal">
          <div class="col-sm-12 form-section-title"> Configuration </div>
          <!-- name-input -->
          <div class="form-group">
            <label for="container_name" class="col-sm-3 col-lg-2 control-label text-left">Name</label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="container_name" ng-model="endpoint.Name" placeholder="e.g. kubernetes-cluster01 / docker-prod01" />
            </div>
          </div>
          <!-- !name-input -->
          <!-- endpoint-url-input -->
          <div class="form-group" ng-if="!state.edgeEndpoint">
            <label for="endpoint_url" class="col-sm-3 col-lg-2 control-label text-left">
              Environment URL
              <portainer-tooltip
                position="bottom"
                message="URL or IP address of a Docker host. The Docker API must be exposed over a TCP port. Please refer to the Docker documentation to configure it."
              >
              </portainer-tooltip>
            </label>
            <div class="col-sm-9 col-lg-10">
              <input
                ng-disabled="endpointType === 'local' || state.azureEndpoint"
                type="text"
                class="form-control"
                id="endpoint_url"
                ng-model="endpoint.URL"
                placeholder="e.g. 10.0.0.10:2375 or mydocker.mydomain.com:2375"
              />
            </div>
          </div>
          <!-- !endpoint-url-input -->
          <!-- endpoint-public-url-input -->
          <div class="form-group" ng-if="!state.azureEndpoint">
            <label for="endpoint_public_url" class="col-sm-3 col-lg-2 control-label text-left">
              Public IP
              <portainer-tooltip
                position="bottom"
                message="URL or IP address where exposed containers will be reachable. This field is optional and will default to the environment URL."
              >
              </portainer-tooltip>
            </label>
            <div class="col-sm-9 col-lg-10">
              <input type="text" class="form-control" id="endpoint_public_url" ng-model="endpoint.PublicURL" placeholder="e.g. 10.0.0.10 or mydocker.mydomain.com" />
            </div>
          </div>
          <div class="form-group" ng-if="state.edgeEndpoint">
            <label for="edge_checkin" class="col-sm-2 control-label text-left">
              Poll frequency
              <portainer-tooltip
                position="bottom"
                message="Interval used by this Edge agent to check in with the Portainer instance. Affects Edge environment management and Edge compute features."
              ></portainer-tooltip>
            </label>
            <div class="col-sm-10">
              <select
                id="edge_checkin"
                class="form-control"
                ng-model="endpoint.EdgeCheckinInterval"
                ng-options="+(opt.value) as opt.key for opt in state.availableEdgeAgentCheckinOptions"
              ></select>
            </div>
          </div>
          <!-- !endpoint-public-url-input -->
          <azure-endpoint-config
            ng-if="state.azureEndpoint"
            application-id="endpoint.AzureCredentials.ApplicationID"
            tenant-id="endpoint.AzureCredentials.TenantID"
            authentication-key="endpoint.AzureCredentials.AuthenticationKey"
          ></azure-endpoint-config>
          <div class="col-sm-12 form-section-title"> Metadata </div>
          <!-- group -->
          <div class="form-group">
            <label for="endpoint_group" class="col-sm-3 col-lg-2 control-label text-left"> Group </label>
            <div class="col-sm-9 col-lg-10">
              <select ng-options="group.Id as group.Name for group in groups" ng-model="endpoint.GroupId" id="endpoint_group" class="form-control"></select>
            </div>
          </div>
          <!-- !group -->
          <!-- tags -->
          <div class="form-group">
            <tag-selector ng-if="endpoint && availableTags" tags="availableTags" model="endpoint.TagIds" on-create="(onCreateTag)" allow-create="state.allowCreate"></tag-selector>
          </div>
          <!-- !tags -->
          <!-- endpoint-security -->
          <div ng-if="endpointType === 'remote' && !state.azureEndpoint && !state.kubernetesEndpoint && !state.edgeEndpoint && endpoint.Type !== 6">
            <div class="col-sm-12 form-section-title"> Security </div>
            <por-endpoint-security form-data="formValues.SecurityFormData" endpoint="endpoint"></por-endpoint-security>
          </div>
          <!-- !endpoint-security -->
          <!-- open-amt info -->
          <div ng-if="state.showAMTInfo">
            <div class="col-sm-12 form-section-title"> Open Active Management Technology </div>

            <div class="form-group">
              <label for="endpoint_managementinfoVersion" class="col-sm-3 col-lg-2 control-label text-left"> AMT Version </label>
              <div class="col-sm-9 col-lg-10">
                <input type="text" ng-disabled="true" class="form-control" id="endpoint_managementinfoVersion" ng-model="endpoint.ManagementInfo['AMT']" placeholder="Loading..." />
              </div>
            </div>

            <div class="form-group">
              <label for="endpoint_managementinfoUUID" class="col-sm-3 col-lg-2 control-label text-left"> UUID </label>
              <div class="col-sm-9 col-lg-10">
                <input type="text" ng-disabled="true" class="form-control" id="endpoint_managementinfoUUID" ng-model="endpoint.ManagementInfo['UUID']" placeholder="Loading..." />
              </div>
            </div>

            <div class="form-group">
              <label for="endpoint_managementinfoBuildNumber" class="col-sm-3 col-lg-2 control-label text-left"> Build Number </label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  ng-disabled="true"
                  class="form-control"
                  id="endpoint_managementinfoBuildNumber"
                  ng-model="endpoint.ManagementInfo['Build Number']"
                  placeholder="Loading..."
                />
              </div>
            </div>

            <div class="form-group">
              <label for="endpoint_managementinfoControlMode" class="col-sm-3 col-lg-2 control-label text-left"> Control Mode </label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  ng-disabled="true"
                  class="form-control"
                  id="endpoint_managementinfoControlMode"
                  ng-model="endpoint.ManagementInfo['Control Mode']"
                  placeholder="Loading..."
                />
              </div>
            </div>

            <div class="form-group">
              <label for="endpoint_managementinfoDNSSuffix" class="col-sm-3 col-lg-2 control-label text-left"> DNS Suffix </label>
              <div class="col-sm-9 col-lg-10">
                <input
                  type="text"
                  ng-disabled="true"
                  class="form-control"
                  id="endpoint_managementinfoDNSSuffix"
                  ng-model="endpoint.ManagementInfo['DNS Suffix']"
                  placeholder="Loading..."
                />
              </div>
            </div>
          </div>
          <!-- !open-amt info -->
          <div class="form-group">
            <div class="col-sm-12">
              <button
                type="button"
                class="btn btn-primary btn-sm"
                ng-disabled="state.actionInProgress || !endpoint.Name || !endpoint.URL || (endpoint.TLS && ((endpoint.TLSVerify && !formValues.TLSCACert) || (endpoint.TLSClientCert && (!formValues.TLSCert || !formValues.TLSKey))))"
                ng-click="updateEndpoint()"
                button-spinner="state.actionInProgress"
              >
                <span ng-hide="state.actionInProgress">Update environment</span>
                <span ng-show="state.actionInProgress">Updating environment...</span>
              </button>
              <a type="button" class="btn btn-default btn-sm" ui-sref="portainer.endpoints">Cancel</a>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
